<template>
  <div class="YDL">
    <div class="YDLtao">
      <div class="ydl">
        <div class="top">
          <a
           href="javascript:;"
            class="TX"
          >
            <img
              :src="res.avatarUrl"
              alt=""
            >
          </a>
          <div class="xinxi">
            <h4>
              <a href="javascript:;">{{res.nickname}}</a>
              <span></span>
            </h4>
            <p>
              <a href="javascript:;">
                {{res.vipType}}
                <i></i>
              </a>
            </p>
            <div class="qiandao">
              <a
                href="javascript:void(0);"
                @click="Qdao"
                class="qiandaoA"
              >
                <p class="qiandaoP">签到</p>
              </a>
            </div>
          </div>
        </div>

        <!-- 动态关注和粉丝 -->
        <ul>
          <li class="DT">
            <a href="javascript:;">
              <strong>{{res.followeds}}</strong>
              <span>动态</span>
            </a>
          </li>
          <li class="GZ">
            <a href="javascript:;">
              <strong>{{res.follows}}</strong>
              <span>关注</span>
            </a>
          </li>
          <li class="FS">
            <a href="javascript:;">
              <strong>{{res.gender}}</strong>
              <span>粉丝</span>
            </a>
          </li>
        </ul>

      </div>
    </div>
  </div>
</template>
<script>
export default {
 data: () => ({
   res:{}
 }),
  created() {
    // this.res=this.$store.state.DLorZC.nickname
    let s=localStorage.getItem("token")
    if(s){
      this.res=JSON.parse(localStorage.getItem("RXX"))
    }
  },
  mounted() {
    // this.res=this.$store.state.DLorZC.nickname
  },
  methods: {
    Qdao(){
      let A=document.querySelector(".qiandaoA")
      let P=document.querySelector(".qiandaoP")
      console.log("aaa")
      P.style.color="#ccc"
      P.innerText ="已签到"
      A.style.backgroundPosition="right -344px"
      P.style.backgroundPosition="0px -304px"
    }
  }
};
</script>
<style lang="less">
.YDL{
  margin-top: 0px;
      font-size: 12px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    background:#fff;
    a{
      text-decoration: none;
      cursor: pointer;
    }
    li{
      list-style: none;
    }
  .YDLtao{
    .ydl{
      height: 165px;
      padding-top: 20px;
      background: url('../../../../../assets/cyzimgs/xuebitu.png');
      background-position: 0 -270px;
      font-size: 12px;
      color: #333;
      font-family: Arial, Helvetica, sans-serif;
      .top{
        .TX{
          float: left;
          width: 80px;
          height: 80px;
          margin-left: 20px;
          _margin-left: 10px;
          padding: 2px;
          background: #fff;
          border: 1px solid #dadada;
          position: relative;
          zoom: 1;
           img{
              display: block;
              width: 80px;
              height: 80px;
              border: 0;
           }
        }
        .xinxi{
          float: left;
          width: 115px;
          margin-left: 18px;
          padding-top: 3px;
          font-size: 12px;
          color: #333;
          font-family: Arial, Helvetica, sans-serif;
            h4{
              overflow: hidden;
              font-size: 100%;
              padding: 0;
              margin: 0;
              a{
                width: auto;
                max-width: 100%;
                vertical-align: middle;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                display: inline-block;
                color: #333;
              }
              span{
                    font-size: 100%;
              }
            }
            p{
              width: 100%;
              margin-top: 5px;
              padding: 0;
              margin: 0;
              a{
                display: inline-block;
                height: 17px;
                overflow: hidden;
                padding-left: 25px;
                line-height: 18px;
                color: #999;
                font-weight: bold;
                font-style: italic;
                background: url('../../../../../assets/cyzimgs/xuebitu7.png');
                background-position: -130px -64px;
                  i{
                    float: right;
                    width: 8px;
                    height: 17px;
                    background: url('../../../../../assets/cyzimgs/xuebitu7.png');
                    background-position: -192px -64px;
                    display: inline-block;
                    overflow: hidden;
                    vertical-align: middle;
                    font-style: normal;
                    text-align: left;
                    font-size: inherit;
                    line-height: 18px;
                    color: #999;
                    font-weight: bold;
                  }
              }
            }
            .qiandao{
              margin-top: 15px;
              position: relative;
              zoom: 1;
                a{
                  cursor: pointer;
                  color: #fff;
                  background: url('../../../../../assets/cyzimgs/xuebitu8.png');
                  background-position: right -385px;
                  padding: 0 5px 0 0;
                  white-space: nowrap;
                  display: inline-block;
                  height: 31px;
                  line-height: 31px;
                  overflow: hidden;
                  vertical-align: top;
                  text-align: center;
                    p{
                      width: 60px;
                      color: #FFF;
                      background: url('../../../../../assets/cyzimgs/xuebitu8.png');
                      background-position: 0px -385px;
                      padding: 0 15px 0 20px;
                      pointer-events: none;
                      display: inline-block;
                      height: 31px;
                      line-height: 31px;
                      overflow: hidden;
                      vertical-align: top;
                      text-align: center;
                      cursor: pointer;
                    }
                }
                a:hover{
                  background-position: right -467px;
                  p{
                    background-position: 0px -467px;
                  }
                }
                // -1px -467px;
            }
        }
      }
      .xinxi::after{
        clear: both;
        content: '.';
        display: block;
        height: 0;
        visibility: hidden;
      }
      ul{
        margin: 109px 0 0 0;
        color: #666;
          .DT{
            padding-left: 0;
            float: left;
            height: 40px;
            padding: 0 18px;
            border-right: 1px solid #e4e4e4;
             a{
              display: block;
              color: #666;
              cursor: pointer;
                strong{
                  display: block;
                  font-size: 20px;
                  font-weight: normal;
                  cursor: pointer;
                }
                span{
                  cursor: pointer;
                  margin-left: 2px;
                }
             }
          }
          .GZ{
            float: left;
            height: 40px;
            padding: 0 18px;
            border-right: 1px solid #e4e4e4;
            color: #666;
              a{
                display: block;
                color: #666;
                  strong{
                    cursor: pointer;
                    display: block;
                    font-size: 20px;
                    font-weight: normal;
                  }
                  span{
                    cursor: pointer;
                    margin-left: 2px;
                    color: #666;
                  }
              }
          }
          .FS{
            float: left;
            height: 40px;
            padding: 0 18px;
            border-right: 1px solid #e4e4e4;
            color: #666;
              a{
                display: block;
                color: #666;
                  strong{
                    cursor: pointer;
                    display: block;
                    font-size: 20px;
                    font-weight: normal;
                  }
                  span{
                    cursor: pointer;
                    margin-left: 2px;
                    color: #666;
                  }
              }
          }
      }
      ul::after{
        clear: both;
        content: '.';
        display: block;
        height: 0;
        visibility: hidden;
      }
    }
  }
}
</style>